import React from 'react';
import { forwardRef } from 'react';
import './index.scss';

export interface CongestionLevelProps {
  width?: string | number;
  height?: string | number;
  title?: string;
  titleColor?: string;
  titleFontSize?: number;
  titleFontFamily?: string;
  titleFontWeight?: string | number;
  titleLineHeight?: string;
  level?: {
    value?: string | number;
    fontSize?: number;
    color?: string;
    fontFamily?: string;
    fontWeight?: string | number;
    lineHeight?: string;
    letterSpacing?: string;
  };
  levelBoxBackground?: string;
  levelBoxBorder?: string;
  iconPath?: string;
  /**
   * 是否显示图标
   */
  showIcon?: boolean;
  iconSize?: {
    width?: number;
    height?: number;
  };
  theme?: 'light' | 'dark';
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  style?: React.CSSProperties;
  className?: string;
  onClick?: () => void;
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const CongestionLevel = forwardRef<HTMLDivElement, CongestionLevelProps>((props, ref) => {
  const {
    width = 175,
    height = 90,
    title = '南北平台拥堵等级',
    titleColor = 'rgba(255,255,255,0.9)',
    titleFontSize = 16,
    titleFontFamily = 'SourceHanSansSC',
    titleFontWeight = 400,
    titleLineHeight = '22px',
    level = {
      value: '1.5',
      fontSize: 24,
      color: '#FFFFFF',
      fontFamily: 'DINAlternate',
      fontWeight: 'bold',
      lineHeight: '28px',
      letterSpacing: '0.86px'
    },
    levelBoxBackground,
    levelBoxBorder = '1px solid #008BFF',
    iconPath,
    showIcon = true,
    iconSize = {
      width: 24,
      height: 24
    },
    theme = 'dark',
    noResponsiveScale = true,
    style = {},
    className = '',
    onClick,
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  
  const componentStyle: React.CSSProperties = {
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
    ...style
  };

  const titleStyle: React.CSSProperties = {
    color: titleColor,
    fontSize: `${titleFontSize}px`,
    fontFamily: titleFontFamily,
    fontWeight: titleFontWeight,
    lineHeight: titleLineHeight
  };

  const levelStyle: React.CSSProperties = {
    color: level.color,
    fontSize: `${level.fontSize}px`,
    fontFamily: level.fontFamily,
    fontWeight: level.fontWeight,
    lineHeight: level.lineHeight,
    letterSpacing: level.letterSpacing
  };

  const levelBoxStyle: React.CSSProperties = {
    backgroundImage: levelBoxBackground ? `url(${levelBoxBackground})` : 'url(http://localhost:8085/static/images/chuxingfuwu/jx2.png)',
    border: levelBoxBorder,
    backgroundSize: '100% 100%',
    backgroundRepeat: 'no-repeat'
  };

  const iconStyle: React.CSSProperties = {
    width: iconSize.width ? `${iconSize.width}px` : undefined,
    height: iconSize.height ? `${iconSize.height}px` : undefined
  };

  const handleClick = () => {
    onClick?.();
  };

  const congestionLevelClassName = [
    'hzdz-congestion-level',
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={congestionLevelClassName}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      onClick={handleClick}
      {...otherProps}
    >
      <div className="hzdz-congestion-level__title" style={titleStyle}>
        {title}
      </div>
      <div className="hzdz-congestion-level__content">
        <div className="hzdz-congestion-level__level-box" style={levelBoxStyle}>
          <div className="hzdz-congestion-level__level" style={levelStyle}>
            {level.value}
          </div>
        </div>
        {showIcon && (
          <img
            className="hzdz-congestion-level__icon"
            src={iconPath || 'http://localhost:8085/static/images/chuxingfuwu/bj30.png'}
            alt="图标"
            style={iconStyle}
          />
        )}
      </div>
    </div>
  );
});

CongestionLevel.displayName = 'CongestionLevel';

export default CongestionLevel; 